<template>
    <div class="container">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <!--左侧个人博客信心-->
                    <el-card>
                        <div class="row">
                            <!--昵称和头像框-->
                            <div class="pg-header">
                                <div class="col-md-6" id="left">{{user['username']}}</div>
                                <div class="col-md-6" id="right" @click="personal">
                                    <el-avatar   class="image" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                                </div>
                            </div>
                            <el-divider></el-divider>

                            <!--文章喜欢的数量-->
                            <div class="pg-article">
                                <el-row :gutter="20" class="art">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div>文章</div>
                                        <div>{{total}}</div>
                                    </div></el-col>
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div>粉丝</div>
                                        <div>{{fans}}</div>
                                    </div></el-col>
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div>喜欢</div>
                                        <div>0</div>
                                    </div></el-col>
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div>收藏</div>
                                        <div>0</div>
                                    </div></el-col>
                                  </el-row>
                            </div>
                            <el-divider></el-divider>

                            <!--关注和私信的按钮-->
                            <div class="pg-footer">
                                <el-button @click="atttention" v-if="!msg">
                                    <span><i class="fa fa-plus" aria-hidden="true" ></i>&nbsp关注</span>
                                    <!-- <span  v-else><i class="fa fa-plus" aria-hidden="true"></i>&nbsp已关注</span> -->
                                
                                </el-button>
                                <el-button v-else>
                                    <!-- <span v-if="!msg"><i class="fa fa-plus" aria-hidden="true" ></i>&nbsp关注</span> -->
                                    <span><i class="fa fa-plus" aria-hidden="true"></i>&nbsp已关注</span>
                                
                                </el-button>
                                <el-button type="primary"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp私信</el-button>
                            </div>
                        </div>

                    </el-card>    
                </div>
            </el-col>

            <el-col :span="16">
                <div class="grid-content bg-purple">
                        <!--内容主体区域-->
                        <el-card>
                            <h1 style="font-size: 20px;">{{article["title"]}}</h1>
                            <div>
                                <el-breadcrumb separator="/">
                                  
                                    <el-breadcrumb-item><i class="fa fa-eye" aria-hidden="true"></i>&nbsp3</el-breadcrumb-item>
                                    <el-breadcrumb-item><i class="fa fa-comments-o" aria-hidden="true"></i>&nbsp7</el-breadcrumb-item>
                                    <el-breadcrumb-item>发布于8小时前</el-breadcrumb-item>
                                  </el-breadcrumb>
                            </div>
                            <el-divider></el-divider>

                            <div v-html="article['content']">
                            
                            </div>

                        </el-card>
                  
                </div>
            </el-col>
            <!--右侧的竖框-->
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <div>
                        <div class="box1">
                            <div>
                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>

                            </div>
                            <div>
                                <span>0</span>
                            </div>
                        </div>

                      
                    </div>

                    <div>
                        <div class="box1">
                            <div>
                                <i class="fa fa-heart-o" aria-hidden="true"></i>
                            </div>
                            <div>
                                <span>0</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="box1">
                            <div>
                                <i class="fa fa-comments-o" aria-hidden="true"></i>
                            </div>
                            <div>
                                <span>0</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="box1">
                            <div>
                                <i class="fa fa-share" aria-hidden="true"></i>
                            </div>
                            <div>
                                <span>0</span>
                            </div>
                        </div>
                    </div>
               
                    
                </div>
            </el-col>
     
          </el-row>
    </div>
</template>

<script>
    export default{
        data() {
            return {
                id:'',
                userid:'',
                article:[],
                user:[],
                add_follow:{
                    user:'',
                    follower_user:'',
                    status:'1'
                },
                token:"",
                msg:'',
                total:'',
                start:"",
                add_fans:{
                    follower:'',
                    user:'',
                    status:'1'
                },
                fans:""
            }
        },
        created() {
            this.getdata()
            this.getuser()
            
        },
        computed: {
            
        },
        methods: {
            async atttention(){
                
                this.add_follow.follower_user = this.user.username
                console.log(this.add_follow)
                this.token = window.sessionStorage.getItem('token')
                const {data:res} = await this.$http.get(`token/${this.token}/${this.id}`)
                this.add_follow.user = res.data.id
                console.log('----',this.add_follow)

                const {data:ret} = await this.$http.post('follow/',this.add_follow)
                this.add_fans.user = this.user.id
                console.log(this.add_fans)
                const {data:reb} = await this.$http.post('fans/',this.add_fans)
                this.getuser()
                this.getdata()
                
            },
            async getdata(){
                this.id = location.href.split('=')[1]
              
                const {data:res} = await this.$http.get(`article/${this.id}`)
                console.log(res)
                this.article = res.list
                this.user = res.user
                this.total = res.total
                this.fans = res.fans
            },
            personal(){
                //跳转到个人中心
                this.userid = this.article['user']
                this.$router.push({path:'/users',query:{id:this.userid}})
           },
           async getuser(){
            this.start = window.sessionStorage.getItem('token')
            const {data:res} = await this.$http.get(`token/${this.start}/${this.id}`)
            if(res.status){
                this.msg = true
            }else{this.msg=false}
            this.add_fans.follower = res.current_user
            
           }
           
        },
    }
</script>

<style lang="less" scoped>
    .box1{
        text-align: center;
        width: 60px;
        height:100%;
        border: 2px #FFF solid;
        background-color: #FFF;
        margin: 10px;
        position: relative;
        font-size: 24px;

    
    }
    .pg-header{
        height: 50px;
    }
    #right{
        text-align: right;
    }
    #left{
        text-align: left;
    }
    .image{
        width: 60px;
        height: 60px;
    }
    
    .art ,.pg-footer{
        text-align: center;
    }
</style>
